<template>
  <div class="navbar">
    <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true">

      <el-menu-item>
        <div class="header-logo">
          来追梦比赛系统
        </div>
      </el-menu-item>

      <el-menu-item index="/problem/list"><i class="el-icon-s-opportunity"/>题目</el-menu-item>
      <el-menu-item index="/category"><i class="el-icon-s-data"/> 分类</el-menu-item>
      <el-menu-item index="/contest/list"><i class="el-icon-trophy"/>比赛</el-menu-item>
      <el-menu-item index="/submission/list"><i class="el-icon-s-marketing"/>提交</el-menu-item>
      <el-menu-item v-if="modalStatus && userInfo.userType===THIS_USER_TYPE.ADMIN_USER" index="/admin"><i
          class="el-icon-lock"/>管理
      </el-menu-item>
      <div class="header-userInfo">
        <div v-if="!modalStatus" class="header-userInfo-notLogin">
          <div class="not-login-header">
            <el-menu-item index="/login">登录</el-menu-item>
            <el-menu-item index="/register">注册</el-menu-item>
          </div>
        </div>
        <div v-else>
          <el-submenu>
            <template slot="title">
                        <span class="login-item-title">
                            <img :src="userInfo.avatar"/>
                        </span>
            </template>

            <el-menu-item index="/user/profile">信息</el-menu-item>
            <el-menu-item index="/settings/profile-settings">更新</el-menu-item>
            <el-menu-item @click="handleLogout">登出</el-menu-item>
          </el-submenu>
        </div>
      </div>
    </el-menu>
  </div>
</template>

<script>
import {mapMutations, mapActions, mapState} from 'vuex'
import storage from '@/utils/storage'
import {STORAGE_KEY, USER_TYPE} from '@/utils/constants'
import {logout} from '@/network/user'
import ElSubmenu from "element-ui/packages/menu/src/submenu";

export default {
  components: {ElSubmenu},
  name: "Navbar",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      THIS_USER_TYPE: USER_TYPE
    };
  },
  mounted() {
    if (storage.get(STORAGE_KEY.AUTHENTICATE)) {
      console.log("处于登录状态")
      this.getProfile()
    } else {
      console.log("奇了怪了，不处于登录状态")
    }
  },
  computed: {
    ...mapState([
      'modalStatus', 'userInfo'
    ])
  },
  methods: {


    ...mapMutations(["clearProfile"]),
    ...mapActions(["getProfile"]),
    handleLogout: function () {
      this.$confirm("Confirm Logout?", "Tips", {})
          .then(_ => {
            logout().then(_ => {
              this.$router.replace({name: "homepage"}).catch(_ => {
              });
              this.clearProfile();
            });
          });
    }
  }
};
</script>

<style lang="less" scoped>
navbar {
  height: 60px;
  border-radius: 20px;
  overflow: hidden;
}

.header {
  width: 100%;
  min-width: 1200px;

  &-logo {
    margin: 0px 2%;
    font-size: 20px;
    line-height: 60px;
    float: left;
    color: #fff;
  }
}

.header-userInfo {
  float: right;
  margin-right: 15px;
  line-height: 60px;
}

.not-login-header {
  display: flex;
}

.login-item-title {
  margin-right: 20px;

  img {
    height: 40px;
    width: 40px;
    border-radius: 20px;
  }
}
</style>
